<template>
	<view :class="model+'-wrap'">
		<view class="" style="background: #00cf99;height: 100vh;">
			<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
				<view class="status_bar">

				</view>
				<view class="nav_bar flex align-center justify-between">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
					<view class="A-Medium" :class="'navTitle_'+model">
						{{i18n.l001}}
					</view>
					<view class="f0 p-3 opacity0">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="f0" style="position: relative;">
				<image style="width: 750rpx;" src="/static/images/shareBg.png" mode="widthFix"></image>
				<view class="codeBg flex align-center justify-center">
					<image style="width: 192rpx;height: 192rpx;border-radius: 12rpx;" :src="codeImg2" mode=""></image>
				</view>
			</view>
			<view @click="save" class="btn flex align-center justify-center A-Medium">
				{{i18n.l002}}
			</view>
			<!-- 画布 -->
			<canvas canvas-id="myCanvas" id='sss'
				style="width: 375px;height: 724px;position: fixed;top: -10000000px;"></canvas>
		</view>
	</view>
</template>

<script>
	import {
		generateQRCode
	} from '@/core/api/index.js';
	import {
		baseUrl
	} from '@/core/baseUrl.js';
	export default {
		data() {
			return {
				codeImg: '',
				codeImg2: 'data:image/png;base64,'
			}
		},
		onLoad() {
			console.log(1);
			generateQRCode({
				"height":500,
				"qrCodeData":'http://szscht.laobailianmeng.com/h5/#/pages/login/registerH5?inviteCode='+this.inviteCode,
				"width":500,
			}).then(res=>{
				this.codeImg2 += res.result;
			})
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('last');
			},
			model() {
				return this.$store.state.config.model;
			},
			inviteCode() {
				return this.$store.state.config.inviteCode;
			}
		},
		methods: {
			save() {
				let ww = 375;
				let hh = 724;
				var ctx = uni.createCanvasContext('myCanvas') //绑定画布
				ctx.drawImage('/static/images/shareBg.png', 0, 0, ww, hh); //填充进图片
				// 开始绘制圆角矩形
				const qrWidth = 96;
				const qrHeight = 96;
				const cornerRadius = 6;
				const qrX = 139; // 二维码距离左边的距离
				const qrY = 159;
				ctx.beginPath();
				ctx.moveTo(qrX + cornerRadius, qrY);
				ctx.lineTo(qrX + qrWidth - cornerRadius, qrY);
				ctx.quadraticCurveTo(qrX + qrWidth, qrY, qrX + qrWidth, qrY + cornerRadius);
				ctx.lineTo(qrX + qrWidth, qrY + qrHeight - cornerRadius);
				ctx.quadraticCurveTo(qrX + qrWidth, qrY + qrHeight, qrX + qrWidth - cornerRadius, qrY + qrHeight);
				ctx.lineTo(qrX + cornerRadius, qrY + qrHeight);
				ctx.quadraticCurveTo(qrX, qrY + qrHeight, qrX, qrY + qrHeight - cornerRadius);
				ctx.lineTo(qrX, qrY + cornerRadius);
				ctx.quadraticCurveTo(qrX, qrY, qrX + cornerRadius, qrY);
				ctx.closePath();
				// 裁剪canvas
				ctx.clip();
				ctx.drawImage(this.codeImg2, qrX, qrY, qrWidth, qrHeight); //填充二维码
				ctx.draw(); //输出到画布中
				uni.showLoading({ //增加loading等待效果
					mask: true
				})
				setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: (res) => {
							// console.log(res.tempFilePath)
							uni.saveImageToPhotosAlbum({ //保存图片
								filePath: res.tempFilePath,
								success: (res) => {
									uni.hideLoading();
									uni.showToast({
										title: this.i18n.l003,
										icon: 'none'
									})
								}
							})
						}
					})
				}, 1200)
			},
			//网络图片转本地
			async fangfa(src) {
				// src = 'http://szsc.laobailianmeng.com/digital-mall/1722397346408_Screenshot_20240716_102956_1722397321595.jpg';
				let a = await this.getImageInfo(src);
				console.log(a);
				this.codeImg2 = a.path;
			},
			getImageInfo(src) {
				return new Promise((resolve, reject) => {
					wx.getImageInfo({
						src,
						success: (res) => resolve(res),
						fail: (res) => reject(res)
					})
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.codeBg {
		width: 213rpx;
		height: 213rpx;
		background: rgba(247, 247, 247, .32);
		border-radius: 18rpx;
		position: absolute;
		top: 306rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 66;
	}

	.btn {
		width: 308rpx;
		height: 88rpx;
		background: #0E0F11;
		border-radius: 64rpx;
		border: 2rpx solid #0E0F11;
		font-size: 28rpx;
		color: #F7F7F7;
		position: fixed;
		bottom: 72rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
</style>